<template>
	<div class="side-left-right">
		<div class="item-plane">
			<div class="item_2">
				<div class="box-parent">
					<div class="head">
						<span class="title">无感设备统计</span>
					</div>
					<div class="box">
						<div class="box1">
							<div class="box1-2">
								<span class="value">40
									<span class="unit">个</span>
								</span>
								<span class="title">总数</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-2">
								<span class="value2">10
									<span class="unit">个</span>
								</span>
								<span class="title">在线</span>
							</div>
						</div>
						<div class="box1">
							<div class="box1-2">
								<span class="value3">10
									<span class="unit">个</span>
								</span>
								<span class="title">离线</span>
							</div>
						</div>
						<div class="box2">
							<span class="title">设备占比</span>
							<piechartKj3D class="chartsGl" :datalist="pieData" width="260px" height="105px">
							</piechartKj3D>
							<div class="box2-2">
								<div class="box2-2-1">
									<span class="title2">在线</span>
									<span class="title3">90</span>
									<span class="title4">70%</span>
								</div>
								<div class="box2-2-2">
									<span class="title2">离线</span>
									<span class="title3">10</span>
									<span class="title4">70%</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item_3">
				<div class="box-parent">
					<div class="head">
						<span class="title">异常事件统计</span>
					</div>
					<div class="box">
						<div class="box1">
							<span class="title">最新事件：</span>
							<span class="value">xxxxxxxxxxxxxxxx故障</span>
						</div>
					</div>
					<div class="chart" ref="chart2Container">
						<v-chart ref="chart2" :dSource="datState2" :w="'100%'" :h="'100%'"></v-chart>
					</div>
				</div>
			</div>
			<div class="item_4">
				<div class="box-parent">
					<div class="head">
						<span class="title">综合列表</span>
					</div>
					<div class="box">
						<div class="box1-1">
							<input type="text" placeholder="请输入搜索内容" class="box1-1-1-input">
							<div class="logo"></div>
							<el-select v-model="value" placeholder="房间列表" @change="changeValue" class="custom-popper">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="box1-2">
							<div class="box1-2-1">
								<span class="title">房间号/区域：</span>
								<span class="value">417看护室</span>
								<div class="box1"></div>
							</div>
							<div class="box1-2-2">
								<div class="logo1"></div>
								<div class="right">
									<span class="title">无感设备1</span>
									<span class="value">jx012347345</span>
								</div>
								<div class="left">
									<span class="title">关键指标1</span>
									<span class="value">指标1</span>
								</div>
								<div class="right2">
									<span class="title">关键指标2</span>
									<span class="value">指标2</span>
								</div>
							</div>
							<div class="box1-2-2">
								<div class="logo1"></div>
								<div class="right">
									<span class="title">无感设备1</span>
									<span class="value">jx012347345</span>
								</div>
								<div class="left">
									<span class="title">关键指标1</span>
									<span class="value">指标1</span>
								</div>
								<div class="right2">
									<span class="title">关键指标2</span>
									<span class="value">指标2</span>
								</div>
							</div>
							<div class="box1-2-3">
								<div class="logo1"></div>
								<div class="logo2"></div>
							</div>
						</div>
						<div class="box1-2">
							<div class="box1-2-1">
								<span class="title">房间号/区域：</span>
								<span class="value">417看护室</span>
								<div class="box1"></div>
							</div>
							<div class="box1-2-2">
								<div class="logo1"></div>
								<div class="right">
									<span class="title">无感设备1</span>
									<span class="value">jx012347345</span>
								</div>
								<div class="left">
									<span class="title">关键指标1</span>
									<span class="value">指标1</span>
								</div>
								<div class="right2">
									<span class="title">关键指标2</span>
									<span class="value">指标2</span>
								</div>
							</div>
							<div class="box1-2-2">
								<div class="logo1"></div>
								<div class="right">
									<span class="title">无感设备1</span>
									<span class="value">jx012347345</span>
								</div>
								<div class="left">
									<span class="title">关键指标1</span>
									<span class="value">指标1</span>
								</div>
								<div class="right2">
									<span class="title">关键指标2</span>
									<span class="value">指标2</span>
								</div>
							</div>
							<div class="box1-2-3">
								<div class="logo1"></div>
								<div class="logo2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import sList from "cmpt/table.vue";
import vChart from "mChart/chart.vue";
import apis from '@/api/indexapi.js';
import * as echarts from 'echarts';
import { ref, watch, onMounted, reactive } from 'vue';
import piechartKj3D from "../../components/chart/chartPie.vue";
const searchBarStyle = "margin: 0 auto;margin-top: 10px;width:100%;height:32px";
//请求的实例
const _api = apis();
//下拉框的值
const value = ref('');
const changeValue = (val) => {
	console.log("下拉框选中：", val);
}
const options = ref([
	{
		value: '1',
		label: '温湿度'
	}, {
		value: '2',
		label: '空气质量'
	}, {
		value: '3',
		label: 'XX设备'
	}
])
const btnclose = () => {
	goDetail.value = false;
}
//弹窗控制
const goDetail = ref(false);
//巡查点击事件
const patrol = () => {
	goDetail.value = true;
}
const chart2Container = ref(null);
const chart2 = ref(null);
const datState2 = reactive(createCylindricalBar(15, 15, '#FF8C8C', ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [], [10, 6, 9, 26, 50, 20]));
function createCylindricalBar(size, thickness, color, xAxisData, yAxisData, seriesData) {
	return {
		title: {
			text: '次',
			left: 16,
			textStyle: {
				color: "#575555",
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 12,
			}
		},
		grid: {
			left: '5%',
			right: '5%',
			// top: '5%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		tooltip: {
			trigger: 'item',
			formatter: function (parms) {
				return parms.marker + " " + parms.name + "：" + parms.value + "次";
			}
		},
		xAxis: {
			type: 'category',
			data: xAxisData,
			axisTick: { show: false },
			axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
			axisLabel: {
				color: '#2A2E3E', // 文字颜色
				fontSize: 12, // 字体大小
				fontFamily: 'Adobe Heiti Std', // 字体
				fontWeight: 'normal', // 字体粗细
				fontStyle: 'italic', // 斜体字
				// lineHeight: 80, // 行高
				margin: 20, // 距离坐标轴的间距
				interval: 0 // 确保显示所有标签
			}
		},
		yAxis: {
			type: 'value',
			axisTick: { show: false },
			axisLine: { show: false },
			axisLabel: { color: '#2A2E3E', fontSize: 12 },
			splitLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } }
		},
		series: [
			{
				type: "pictorialBar",
				symbolSize: [thickness, size],
				symbolOffset: [0, 10],
				z: 12,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: color },
						{ offset: 1, color: color }
					])
				},
				data: seriesData
			},
			{
				type: 'bar',
				barWidth: thickness,
				barGap: '0%',
				itemStyle: {
					color: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						type: "linear",
						global: false,
						colorStops: [
							{ offset: 0, color: "#FF8C8C" },
							{ offset: 1, color: "#F95B5B " }
						]
					}
				},
				data: seriesData
			},
			{
				type: "pictorialBar",
				symbolSize: [thickness, size],
				symbolOffset: [0, -10],
				z: 12,
				symbolPosition: "end",
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: color },
						{ offset: 1, color: color }
					], false)
				},
				data: seriesData
			}
		]
	};
}
const pieData = ref([
	{ name: "在线", value: 16, itemStyle: { color: '#49A5F7' } },
	{ name: "离线", value: 12, itemStyle: { color: '#F87352' } },
]);
//当前选中
const currentTab = ref('monitorList');
const changeTab = (tabName) => {
	currentTab.value = tabName;
	fetchData(); // 请求新数据
}
const fetchData = () => {
	// 根据currentTab获取对应数据
	if (currentTab.value === 'monitorList') {
		dtjHead.value = [
			listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("controller", "操作", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
		];
		// 请求监控列表数据的API
		dtjDts.value = [
			{
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "离线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "在线",
				controller: "查看"
			},
			{
				name: "监控1",
				num: "r3465477",
				state: "离线",
				controller: "查看"
			},
		]
	} else {
		dtjHead.value = [
			listHead("name", "组名", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("num", "监控数量", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
			listHead("remark", "备注", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
		];
		// 请求监控组数据的API
		dtjDts.value = [
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
			{
				name: "监控组1",
				num: "6",
				remark: "XXX"
			},
		]
	}
}
watch(() => {
	if (chart2.value && typeof chart2.value.setDat === 'function') {
		chart2.value.setDat(datState2);
	}
})

function listHead(k, v, w, icon, ev, s, color) {
	return {
		k,
		v,
		w,
		icon: icon || null,
		click: ev || null,
		sort: s,
		color: color || null
	};
}
const dtjHead = ref([]);
const dtjDts = ref([]);
//表头样式
const headStl = "width: 450px;height: 30px;background: #4f9df4;border-radius: 6px;"
//表格样式
const itemStl = "border-radius: 6px;font-size:14px;width: 450px;height: 30px;margin-top: 4px;background: rgb(219, 229, 244);opacity: 0.75;"
dtjHead.value = [
	listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
	listHead("controller", "操作", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
];
dtjDts.value = [
	{
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "离线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "在线",
		controller: "查看"
	},
	{
		name: "监控1",
		num: "r3465477",
		state: "离线",
		controller: "查看"
	},
]
onMounted(() => {
})
watch(dtjDts, (newVal) => {
	console.log('dtjDts updated:', newVal);

});
</script>

<style scoped lang="scss">
.messageBox {
	position: absolute;
	left: 276px;
	bottom: 250px;
	width: 1026px;
	height: 246px;
	background-image: url("/imgs/jk/矩形 1@2x(2).png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	margin-top: 40px;
	flex-direction: row;

	.head {
		width: 400px;
		display: flex;
		height: 45px;
		position: relative;
		top: -26px;
		background-image: url("/imgs/nindex/title.png");
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.title {
			margin-top: 5px;
			margin-left: 60px;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 27px;
			color: #FFFFFF;

		}
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;

		.box1 {
			display: flex;
			justify-content: space-around;
			margin-top: 30px;
			margin-left: 13px;
			width: 240px;
			height: 200px;
			background-image: url("/imgs/jk/组 1730.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.title1 {
			margin-top: 5px;
		}
	}

	.ktText {
		position: absolute;
		top: 15px;
		left: 200px;
		font-family: FZCuYuan-M03S;
		font-weight: 400;
		font-size: 18px;
		color: #fefefe;
	}

	.ktBtn {
		z-index: 999;
		position: absolute;
		top: 11px;
		right: 21px;
		width: 20px;
		height: 16px;
		background-image: url(/imgs/AirConditioner/hid_icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
}


.side-left-right {
	padding: 0;
}

.item-plane {
	display: flex;
	justify-content: space-between;
	padding: 0px 0px 0px 0px !important;
	height: calc(100% - 40px) !important;
	margin-bottom: 40px;
}

.item_2 {
	height: 11%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 40px;
		// display: flex;
		flex-direction: row;
		height: 259px;
		background-image: url('/imgs/jk/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url("/imgs/nindex/title.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 80px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;

			}
		}

		.box {
			top: -14px;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			justify-content: center;
			align-items: center;
			gap: 5px;

			.box2 {
				width: 100%;
				margin-top: 0px;
				height: 120px;
				display: flex;
				background-image: url("/imgs/nindex/组 1728.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				align-items: center;

				.chartsGl {
					height: 105px;
					width: 210px !important;
				}

				.title {
					top: 95px;
					left: 51px;
					position: absolute;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 17px;
					color: #FFFFFF;
					opacity: 0.8;
				}

				.box2-2 {
					margin-top: 60px;
					display: flex;
					width: 100px;
					height: 100px;
					flex-wrap: wrap;
					flex-direction: column;

					.box2-2-1 {
						display: flex;
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 30px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 44px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}

						.title4 {
							margin-left: 24px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #58AFF6;
							line-height: 20px;
						}
					}

					.box2-2-2 {
						display: flex;
						width: 500px;
						margin-top: 10px;
						background-image: url("/imgs/nindex/组 1722 拷贝.png");
						background-position: left;
						background-repeat: no-repeat;

						.title2 {
							margin-left: 30px;
							height: 14px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 15px;
							color: #2A2E3E;
							line-height: 20px;
						}

						.title3 {
							margin-left: 44px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}

						.title4 {
							margin-left: 24px;
							font-family: DIN1451EF EngNeu;
							font-weight: 400;
							font-size: 30px;
							color: #FF8961;
							line-height: 20px;
						}
					}

				}
			}

			.box1 {
				width: 150px;
				height: 90px;
				display: flex;
				background-image: url("/imgs/jk/矩形 686(1).png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// justify-content: space-between;
				align-items: center;

				.box1-2 {
					margin-left: 30px;
					display: flex;
					flex-direction: column;
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.title {
						font-family: Adobe Heiti Std;
						font-weight: normal;
						font-size: 15px;
						color: #2A2E3E;
						line-height: 23px;
						opacity: 0.8;
					}

					.value {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #FFA200;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value2 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #218CFF;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value3 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #F1774D;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

					.value4 {
						height: 29px;
						font-family: DIN1451EF EngNeu;
						font-weight: 400;
						font-size: 37px;
						color: #DA61AB;
						line-height: 25px;

						.unit {
							width: 12px;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							line-height: 23px;
							opacity: 0.5;
						}
					}

				}
			}
		}
	}
}


.item_3 {
	height: 13%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 30px;
		// display: flex;
		flex-direction: row;
		align-items: center;
		overflow: visible;
		height: 280px;
		background-image: url('/imgs/nindex/kuang.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url(/imgs/nindex/title.png);
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 70px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;
			}
		}

		.chart {
			width: 100%;
			height: 200px;
		}

		.box {
			top: -24px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			position: relative;

			.box1 {
				display: flex;
				width: 100%;
				align-items: center;
				height: 34px;
				background-image: url("/imgs/room/矩形 686 拷贝 3.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.title {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 15px;
					color: #FFFFFF;
					line-height: 23px;
					opacity: 0.8;
				}

				.value {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 15px;
					color: #FCFF00;
					line-height: 23px;
					opacity: 0.8;
				}
			}
		}
	}
}

.item_4 {
	height: 42%;

	.box-parent {
		padding: 0 25px 0 25px;
		margin-top: 28px;
		flex-direction: row;
		height: 350px;
		background-image: url('/imgs/jk/矩形 1.png');
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.head {
			display: flex;
			height: 45px;
			position: relative;
			top: -26px;
			background-image: url("/imgs/nindex/title.png");
			background-position: left;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				margin-top: 5px;
				margin-left: 80px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 27px;
				color: #FFFFFF;

			}
		}

		.box {
			top: -25px;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			.box1-1 {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8px;

				.box1-1-1-input {
					width: 306px;
					outline: none;
					height: 34px;
					color: #9d9d9d;
					/* 圆角矩形效果 */
					border: 0;
					/* 取消黑色外框 */
					background: url("/imgs/room/矩形 522.png") no-repeat;
					/* 实现png和背景色共存 */
					background-size: 100% 100%;
					/* 背景图片大小 */

				}

				.logo {
					position: absolute;
					left: 229px;
					width: 75px;
					height: 34px;
					background-image: url("/imgs/room/组 1740.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.custom-popper {
					width: 150px;
					background-image: url("/imgs/room/矩形 535 拷贝 4.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
			}


			.box1-2 {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				height: 138px;
				width: 100%;
				margin-top: 4px;
				background-image: url("/imgs/room/矩形 686.png");
				background-position: left;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.box1-2-1 {
					height: 20px;
					width: 100%;
					text-align: center
				}

				.box1-2-2 {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: flex-end;
					width: 195px;
					height: 98px;
					background-image: url("/imgs/room/矩形 535 拷贝 6.png");
					background-position: left;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.logo1 {
						width: 54px;
						height: 44px;
						background-image: url("/imgs/room/zhongduan 1.png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}

					.right {
						display: flex;
						flex-direction: column;
						position: relative;
						left: -14px;
						top: -3px;

						.title {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 17px;
							color: #218CFF;
						}

						.value {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #2A2E3E;
							opacity: 0.8;
						}
					}

					.left {
						display: flex;
						flex-direction: column;
						position: relative;
						top: -5px;

						.title {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 12px;
							color: #2A2E3E;
							opacity: 0.7;
						}

						.value {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #FD821F;
							opacity: 0.8;
						}
					}

					.right2 {
						display: flex;
						flex-direction: column;
						position: relative;
						top: -5px;

						.title {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 12px;
							color: #2A2E3E;
							opacity: 0.7;
						}

						.value {
							font-family: Adobe Heiti Std;
							font-weight: normal;
							font-size: 13px;
							color: #FD821F;
							opacity: 0.8;
						}
					}
				}

				.box1-2-3 {

					.logo1 {
						width: 51px;
						height: 48px;
						background-image: url("/imgs/room/组 1741.png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;

					}

					.logo2 {
						width: 51px;
						height: 48px;
						background-image: url("/imgs/room/组 1742.png");
						background-position: left;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}

				.title {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 16px;
					color: #2A2E3E;
					opacity: 0.7;
				}

				.value {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 18px;
					color: #4586EB;
				}
			}

		}
	}
}
</style>